<template>
  <div>
    <header class="h-modal-header">新增分类</header>
    <div class="r-model-main">
      <!-- <p>传递的参数： {{fruit}}--{{params}}</p> -->
      <Form :model="fruit" :rules="validationRules" :labelWidth="120" ref="form" :top="0.2" showErrorTip>
        <FormItem  label="分类名称：" prop="name">
            <input type="text" v-model="fruit.name" placeholder="请输入分类名称" />
        </FormItem>
        <FormItem  label="分类介绍：" prop="abstract">
            <textarea v-model="fruit.abstract" rows="2" placeholder="请输入分类说明"></textarea>
        </FormItem>
      </Form>
    </div>
    <!-- h-modal-footer 将自带modal底部样式 -->
    <footer class="h-modal-footer r-category-footer">
      <div><button class="h-btn r-button-del" @click="del" v-if="params.id">删除分类</button></div>
      <div>
        <button class="h-btn h-btn-primary" @click="success">{{ params.id ? '编辑' : '提交'}}</button>
        <button class="h-btn" @click="close">取消</button>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    params:Object,
    fruit: {
      type:Object,
      default:()=>{
        return {
          name:'',
          abstract:'',
          creation_time:''
        }
      }
    },
  },
  data() {
    return {
        validationRules:{
          required: ['name']
        }
    };
  },
  computed: {

  },
  methods: {
    success() {
      let validResult = this.$refs.form.valid();
      if(validResult.result){
        this.$emit('success', this.fruit);
        this.close();
      }
    },
    close() {
      this.$emit('close');
    },
    del(){
      this.$emit("delete", this.fruit);
      this.close();
      // console.log('删除id为：'+this.params.id+'的商品分类')
    }
  }
};
</script>
<style type="text/css" lang="less">
.r-model-main{
  padding:0px 20px;
}
.r-category-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>